<template>
	<view>
		<view class="list">
			<!-- 选项1：选择活动场地（仅线下） -->
			<view class="item" v-if="lineType == 2">
				<view class="imgflex flex_jc_cent">
					<image src="/static/lf.png" mode=""></image>
					<text>选择活动场地</text>
					<image src="/static/rf.png" mode=""></image>
				</view>
				<view class="hq">
					<view class="title">发起线下活动前，请先确定场地。你可选择以下方式：</view>
					<view class="text">自行提供或预订场地</view>
					<view class="text">联系分社长，从推荐场地中选择并由分社长协助预订</view>
				</view>
				<view class="imgs flex_jc_cent">
					<view class="flex" @click="toggleCheck(0)">
						<image 
							:src="checkedList[0] ? '/static/radio_a.png' : '/static/radio.png'" 
							mode=""
						></image>
						<view class="">确认阅读</view>
					</view>
				</view>
			</view>

			<!-- 选项2：禁止发起的活动类型（线上线下都显示） -->
			<view class="item">
				<view class="imgflex flex_jc_cent">
					<image src="/static/lf.png" mode=""></image>
					<text>禁止发起的活动类型</text>
					<image src="/static/rf.png" mode=""></image>
				</view>
				<view class="hq">
					<view class="title">为维护社区健康与安全，请勿发起以下类别活动：</view>
					<view class="text">封建迷信类：占卜、算命、运势解读、八字命理、改运改命等</view>
					<view class="text">伪科学类：身心灵、能量疗愈、灵修等</view>
					<view class="text">高风险类：自驾出游、饮酒聚会、剧烈或者对抗性强的运动等存在人身安全风险的活动</view>
					<view class="text">违法违规类：涉黄、涉赌、政治敏感、宗教宣传等违反法律法规或公序良俗的活动</view>
				</view>
				<view class="imgs flex_jc_cent">
					<view class="flex" @click="toggleCheck(getIndex(1))">
						<image 
							:src="checkedList[getIndex(1)] ? '/static/radio_a.png' : '/static/radio.png'" 
							mode=""
						></image>
						<view class="">确认阅读</view>
					</view>
				</view>
			</view>

			<!-- 选项3：活动签到与稻穗值规则（仅线下） -->
			<view class="item" v-if="lineType == 2">
				<view class="imgflex flex_jc_cent">
					<image src="/static/lf.png" mode=""></image>
					<text>活动签到与稻穗值规则</text>
					<image src="/static/rf.png" mode=""></image>
				</view>
				<view class="hq">
					<view class="text">如线下活动设为"签到类"，参与者需要签到，完成签到可增加稻穗值</view>
					<view class="text">活动开始前72小时取消报名不扣分；72小时内取消、迟到或未到场将扣除相应分数</view>
					<view class="text">担任主持人可获3分稻穗值奖励</view>
					<view class="text" @click="$pageGo('/mypage/rice/riceInstructions')">
						点击查看
						<text >《稻穗值共守公约》</text>
					</view>
				</view>
				<view class="imgs flex_jc_cent">
					<view class="flex" @click="toggleCheck(getIndex(2))">
						<image 
							:src="checkedList[getIndex(2)] ? '/static/radio_a.png' : '/static/radio.png'" 
							mode=""
						></image>
						<view class="">确认阅读</view>
					</view>
				</view>
			</view>

			<!-- 选项4：场地饮品费用说明（仅线下） -->
			<view class="item" v-if="lineType == 2">
				<view class="imgflex flex_jc_cent">
					<image src="/static/lf.png" mode=""></image>
					<text>场地饮品费用说明</text>
					<image src="/static/rf.png" mode=""></image>
				</view>
				<view class="hq">
					<view class="title">发起线下活动使用场地，请在"注意事项"中明确饮品费用安排，例如：</view>
					<view class="text">参与者需要自点饮品支持场地</view>
					<view class="text">平台已与合作场地约定统一费用</view>
					<view class="text">免费使用</view>
				</view>
				<view class="imgs flex_jc_cent">
					<view class="flex" @click="toggleCheck(getIndex(3))">
						<image 
							:src="checkedList[getIndex(3)] ? '/static/radio_a.png' : '/static/radio.png'" 
							mode=""
						></image>
						<view class="">确认阅读</view>
					</view>
				</view>
			</view>

			<!-- 选项5：活动费用须知（线上线下都显示） -->
			<view class="item">
				<view class="imgflex flex_jc_cent">
					<image src="/static/lf.png" mode=""></image>
					<text>活动费用须知</text>
					<image src="/static/rf.png" mode=""></image>
				</view>
				<view class="hq">
					<view class="text">平台禁止收取任何报名费或隐性费用。如有门票、讲解费等必要支出，请于"注意事项"中提前说明。私下收费行为一经核实，将按平台规则处理。</view>
				</view>
				<view class="imgs flex_jc_cent">
					<view class="flex" @click="toggleCheck(getIndex(4))">
						<image 
							:src="checkedList[getIndex(4)] ? '/static/radio_a.png' : '/static/radio.png'" 
							mode=""
						></image>
						<view class="">确认阅读</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom_login">
			<image src="/static/blogin.png" mode=""></image>
			<view class="text">— 让生活在这里发生 —</view>
		</view>
		<view class="btn_zw"></view>

		<!-- 确认按钮：根据活动类型动态判断是否全选 -->
		<view class="bottom_btns">
			<view class="cont">
				<view 
					@click="handleconfirm" 
					class="onebtns flex_jc_cent"
					:class="isAllChecked?'active':''">确认发起
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';

const id = ref(0)
const lineType = ref(1) // 1:线上, 2:线下

// 根据活动类型初始化勾选状态
const checkedList = ref([]);

// 初始化勾选状态
const initCheckedList = () => {
	if (lineType.value == 2) {
		// 线下活动：5个选项
		checkedList.value = [false, false, false, false, false];
	} else {
		// 线上活动：2个选项（禁止发起的活动类型、活动费用须知）
		checkedList.value = [false, false];
	}
};

// 获取实际索引（根据活动类型动态映射）
const getIndex = (originalIndex) => {
	if (lineType.value == 2) {
		// 线下活动：直接使用原索引
		return originalIndex;
	} else {
		// 线上活动：重新映射索引
		const onlineMap = {
			1: 0, // 禁止发起的活动类型 -> 索引0
			4: 1  // 活动费用须知 -> 索引1
		};
		return onlineMap[originalIndex] || 0;
	}
};

// 切换指定选项的勾选状态
const toggleCheck = (index) => {
	checkedList.value[index] = !checkedList.value[index];
};

// 计算属性：判断是否全部勾选
const isAllChecked = computed(() => {
	return checkedList.value.every(checked => checked);
});

onLoad((option) => {
	id.value = option.id
	lineType.value = uni.getStorageSync('activity').lineType;
	initCheckedList();
});

// 确认按钮点击事件
const handleconfirm = () => {
	if (isAllChecked.value) {
		if(id.value){
			uni.navigateTo({
				url: `/mypage/activity/activity?sendType=template&&id=${id.value}`
			});
			return
		}
		uni.navigateTo({
			url: '/mypage/activity/activity'
		});
	} else {
		uni.showToast({
			title: '请先阅读并确认所有条款',
			icon: 'none'
		});
	}
};
</script>

<style lang="scss">
page {
	background: #f7f8f6;
}
.bottom_login {
	text-align: center;
	margin: 50rpx auto 20rpx;
	padding-bottom: 1rpx;
	image {
		width: 204rpx;
		height: 64rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8f8f8b;
		text-align: center;
		margin-top: 10rpx;
	}
}
.list {
	.item {
		margin: 30rpx auto;
	}
	.imgflex {
		image {
			width: 60rpx;
			height: 60rpx;
		}
		text {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #75613e;
			margin: 0 30rpx;
		}
	}
	.hq {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx 18rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
			margin-bottom: 16rpx;
		}
		.text {
			line-height: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8f8f8b;
			text {
				color: #31a0fe;
			}
		}
	}

	.imgs {
		width: 710rpx;
		margin: 20rpx auto;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 28rpx;
		}
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		.flex {
			display: flex;
			align-items: center;
		}
	}
}

</style>